<template>
	<view class="infomation">
		<view class="img_box">
			<image :src="query.avatar" mode="aspectFill" class="img" @click.stop="$PREVIEW_IMAGE(query.avatar)"></image>
			<view class="btns" v-if="query.is_face" @click.stop="changDelete">
				删除人脸
			</view>
		</view>

		<view class="comlum_Y_sc">
			<view class="first">
				<view class="name">
					{{query.username}}
				</view>
				<image :src="query.gender?$IMG_URL('/static/test/boylogo.png'):$IMG_URL('/static/test/girlLogo.png')" mode="" class="sex">
				</image>
				<view class="size">
					{{query.user_str}}
				</view>
				<view class="row" @click="openRemark">
					<view class="left">
						<text>备注</text>
						<image :src="$IMG_URL('/static/test/remark.png')" mode="aspectFit" class="remark"></image>
					</view>
					<!-- <view class="right">
						<view class="shop_name">
							{{query.remark?query.remark:'-'}}
						</view>
					</view> -->
				</view>
			</view>
			<view class="scound_csff">
				<image :src="$IMG_URL('/static/test/phone.png')" mode="aspectFill" class="logo"></image>
				<view class="number">
					{{query.mobile}}
				</view>

				<view class="call all_mr" @click.stop="$COPY(query.mobile)">
					复制
				</view>
				<view class="call" @click.stop="opentelephoneShow(query.mobile)">
					拨打
				</view>
			</view>
		</view>
		<telephone :telephoneShow="telephoneShow" :telephone="mobileNumber" @cancel="callCancel" @sure="callSure">
		</telephone>
	</view>
</template>

<script>
	import remarkVue from '../components/remark.vue'
	import telephone from '@/components/telephone.vue'
	export default {
		components: {
			telephone,
		},
		props: {
			query: {
				type: Object,
				default: {},
				required: true
			}
		},
		data() {
			return {
				mobileNumber: '',
				telephoneShow: false,
				popupShow: false,
			}
		},
		methods: {
			openRemark(){
				this.$emit('openRemark')
			},
			sure(str) {
				storeMemberRemark({
					user_id: this.infomation.user_id,
					remark: str
				}).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						// this.getstoreMemberInfo(this.infomation)
						this.popupShow = false
					}
				})
			
			},
			opentelephoneShow(item) {
				console.log('111');
				this.telephoneShow = true
				this.mobileNumber = item
			},
			callSure() {
				let that = this
				uni.makePhoneCall({
					phoneNumber: that.mobileNumber, // 必填，需要拨打的电话号码
					success: function() {
						console.log('拨打电话成功！');
						// 这里可以添加拨打成功后的逻辑，比如提示用户
					},
					fail: function(err) {
						console.log('拨打电话失败：', err);
						// 这里可以添加拨打失败后的逻辑，比如提示用户错误原因
					}
				});
				this.telephoneShow = false
			},
			callCancel() {
				this.telephoneShow = false
			},
			changDelete() {
				this.$emit('changDelete')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.infomation {
		padding: 38rpx 48rpx 38rpx;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #ffffff;

		.row {
			display: flex;
			flex-direction: row;
			align-items: center;

			.left {
				width: 160rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #000000;
				display: flex;
				flex-direction: row;
				align-items: center;

				.remark {
					margin-left: 11rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.shop_logo {
					width: 114rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}

				.shop_name {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: right;
					color: #333333;
				}
			}
		}

		.img_box {
			width: 96rpx;
			height: 96rpx;
			background: rgba(0, 0, 0, 0.00);
			border-radius: 50%;
			margin-right: 19rpx;
			position: relative;

			.btns {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -25rpx;
				width: 112rpx;
				height: 38rpx;
				background: #f37364;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.img {
			width: 96rpx;
			height: 96rpx;
			background: rgba(0, 0, 0, 0.00);
			border-radius: 50%;
		}

		.comlum_Y_sc {
			display: flex;
			flex-direction: column;
		}

		.first {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 18rpx;

			.name {
				margin-right: 16rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
			}

			.sex {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.size {
				margin-right: 12rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				color: #000000;
			}
		}

		.scound_csff {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;

			.logo {
				width: 20rpx;
				height: 30rpx;
				margin-right: 7rpx;
			}

			.number {

				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #666666;
			}

			.call {
				margin-left: 12rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #73F0EA;
			}
		}
	}
</style>